{% extends 'common/table_layout.html' %}


{% block js %}
    <script>
        layui.use(function () {
            var $ = layui.$;
            // 创建渲染实例
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;

            // 渲染table
            table.render({
                elem: '#negotiation_table',
                url: "{% url 'manager:用户数据' %}",
                method: 'post',
                toolbar: '#toolbarDemo',
                page: true,
                limit: 10,
                limits: [10, 20, 50, 100, 200, 500],
                even: true,
                skin: 'row',
                defaultToolbar: ['filter', 'exports', 'print'],
                cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'index', fixed: 'left', width: 80, title: '序号', align: 'center', sort: true},
                    {field: 'id', width: 80, title: 'ID', align: 'center', hide: true},
                    {
                        field: 'username',
                        width: 300,
                        title: '用户名',
                        sort: true,
                        align: 'center',
                    },
                    {
                        field: 'password',
                        width: 300,
                        title: '密码',
                        sort: true,
                        align: 'center',
                    },
                    {fixed: 'right', title: '操作', minWidth: 240, toolbar: '#barDemo', align: 'center'},
                ]],

                error: function (res, msg) {
                    console.log(res, msg)
                }

            })

            // table的工具栏事件
            table.on('toolbar(negotiation_table)', function (obj) {
                switch (obj.event) {
                    case 'add_negotiation':
                        layer.open({
                            type: 2,
                            title: '新增用户',
                            content: "{% url 'manager:用户add' %}",
                            area: ['600px', '400px'],
                            maxmin: true,
                            end: function () {
                                table.reload('negotiation_table');
                            }
                        })
                }
            })

            // 触发单元格工具事件
            table.on('tool(negotiation_table)', function (obj) {
                var data = obj.data
                var negotiation_id = data.id
                if (obj.event === 'delete') {
                    layer.confirm('确定删除: ' + data.username + ' 吗?', function (index) {
                        obj.del();
                        //向后端的发送删除指令
                        $.ajax({
                            url: "{% url 'manager:用户del' %} ",
                            type: "post",
                            data: {'id': negotiation_id},
                            success: function (res) {
                                if (res == 'ok') {
                                    console.log(data.id + '删除成功')
                                    layer.close(index);
                                }
                            }
                        })

                    });
                } else if (obj.event === 'edit') {
                    console.log(negotiation_id)
                    layer.open({
                        type: 2,
                        title: '编辑用户',
                        content: "{% url 'manager:用户edit' %}?id=" + negotiation_id,
                        area: ['600px', '400px'],
                        maxmin: true,
                        end: function () {
                            table.reload('negotiation_table');
                        }
                    })
                }
            })


            // 查询的搜索按钮
            form.on('submit(data-search-btn)', function (data) {
                field = data.field;

                var result = JSON.stringify(field);
                console.log(result)
                // 执行搜索重载
                table.reloadData('negotiation_table', {
                    page: {
                        curr: 1 // 重新从第 1 页开始
                    },
                    where: {
                        searchParams: result
                    }
                });

                return false; // 阻止默认 form 跳转
            });

        })
    </script>
{% endblock %}




